import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
import { message } from "antd";

interface ResponseData<T> {
  code: number;
  data: T;
  message: string;
}

const request = axios.create({
  // 开发环境下: process.env.REACT_APP_API ==> '/dev-api'
  // 生产环境下: process.env.REACT_APP_API ==> '/prod-api'
  // 不管是开发环境,还是生产环境,我们写的代码都需要被webpack先编译,后执行. 当webpack编辑完毕之后, process.env.REACT_APP_API返回的还是一个字符串
  baseURL: process.env.REACT_APP_API, //"/dev-api"
  timeout: 10000,
  headers: {},
});

// 请求拦截器函数：发送请求之前触发的函数
request.interceptors.request.use((config: AxiosRequestConfig) => {
  const token = localStorage.getItem("token");
  // 携带token
  if (token) {
    (config.headers as any).token = token;
  }
  return config;
});

// 响应拦截器函数：得到响应之后触发的函数
request.interceptors.response.use(
  (response: AxiosResponse<ResponseData<any>>) => {
    // 如果请求响应成功，则第一个回调触发. .但是请求响应成功,不代表操作成功
    // 所以如果操作成功了服务器响应的响应主体数据中有一个code为200.不是200就表示操作不成功
    if (response.data.code === 200) {
      return response.data.data; // 去掉axios套的壳子
    } else {
      // 请求响应成功的回调中如果返回了一个失败的promise,则发送axios请求的位置await后面的代码也不会执行.所以以后每次发请求,再也不需要判断操作是否成功
      message.error(response.data.message);
      return Promise.reject(response.data.message);
    }
  },
  (error) => {
    message.error(error);
    return Promise.reject(error);
  }
);

export default request;
